{% extends 'nav.html' %}
{% block title %}酒店住户信息管理系统{% endblock title %}
{% block style %}
    <style>
        #nav ul .useranalysis {
            background: linear-gradient(90deg, rgba(71, 137, 255, 1) 0%, rgba(71, 137, 255, 1) 2%, rgba(71, 137, 255, 0.47) 3%, rgba(71, 137, 255, 0.1) 56%, rgba(36, 69, 128, 0) 100%);
            border-radius: 3px;
        }

        #user {
            float: right;
            margin-top: 35px;
            /*margin-left: 893px;*/
            margin-right: 58px;

        }


        #totle {
            margin-top: 35px;
            float: left;
            width: 1527px;
        }

        .blue {
            width: 354px;
            height: 143px;
            background: linear-gradient(134deg, rgba(115, 165, 255, 1) 0%, rgba(64, 132, 254, 1) 100%);
            box-shadow: 0px 0px 6px rgba(15, 62, 188, 0.03);
            opacity: 1;
            border-radius: 7px;
            float: left;
            /*margin-left: 57px;*/
        }

        .blue .name {
            /* width: 56px; */
            height: 19px;
            font-size: 20px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 19px;
            color: rgba(201, 222, 255, 1);
            opacity: 1;
            margin-top: 32px;
            text-align: center;
        }

        .blue .digit {
            /* width: 108px; */
            height: 35px;
            font-size: 40px;
            font-family: San Francisco Display;
            font-weight: bold;
            line-height: 35px;
            color: rgba(255, 255, 255, 1);
            opacity: 1;
            text-align: center;
            margin-top: 12px;
        }

        .white {
            width: 354px;
            height: 143px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 0px 6px rgba(15, 62, 188, 0.03);
            opacity: 1;
            border-radius: 7px;
            float: left;
            margin-left: 37px;
        }

        .white .name {
            /* width:56px; */
            height: 19px;
            font-size: 20px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 19px;
            color: rgba(158, 173, 197, 1);
            opacity: 1;
            margin-top: 32px;
            text-align: center;
        }

        .white .digit {
            /* width:93px; */
            height: 35px;
            font-size: 40px;
            font-family: San Francisco Display;
            font-weight: bold;
            line-height: 35px;
            color: rgba(71, 137, 255, 1);
            opacity: 1;
            text-align: center;
            margin-top: 12px;
        }

        #new_user_proportion {
            width: 428px;
            height: 418px;
            background: rgba(255, 255, 255, 0);
            opacity: 1;
            border-radius: 7px;
            float: left;
        }

        #money {
            width: 1526px;
            height: 403px;
            background: rgba(255, 255, 255, 1);
            opacity: 1;
            border-radius: 7px;
            float: left;
            margin-top: 24px;
            /*margin-left: 57px;*/
        }

        #live #real {
            width: 248px;
            height: 113px;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(71, 137, 255, 1);
            box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);
            opacity: 0.8;
            border-radius: 7px;
            float: left;
            margin-top: 17px;
        }

        #real .number {
            width: 59px;
            height: 21px;
            font-size: 22px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            line-height: 21px;
            color: rgba(30, 203, 193, 1);
            opacity: 1;
            margin-left: 30px;
            margin-top: 31px;
            float: left;
        }

        #real .name {
            height: 14px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 14px;
            color: rgba(189, 189, 189, 1);
            opacity: 1;
            margin-top: 11px;
            margin-left: 30px;
            float: left;
        }

        #real .realtotledigit {
            width: 23px;
            height: 14px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 14px;
            color: #FE5F5F;
            opacity: 1;
            float: left;
            margin-top: 12px;
            margin-left: 2px;
        }

        .right {
            position: absolute;
            left: 307px;
        }
    </style>
{% endblock style %}

{% block body %}
    {% block useranalysis %}{% endblock %}
    <div class="right">
        <!-- 用户 -->
        <div id="user">
            <img src="../../static/image/index/帮助.png" style="margin-bottom: 9px"/>
            <img src="../../static/image/index/通知.png" style="margin-left:36px;margin-bottom: 9px"/>
            <img src="../../static/image/index/图像 2.png"
                 style="width:40px;height:40px;background:rgba(255,255,255,1);border-radius:50%;opacity:1;margin-left:28px;justify-content:center;overflow:hidden;align-items: center;"/>
            <img src="../../static/image/index/路径 1146@2x.png" style="width:7px;margin-left:12px;margin-bottom: 15px "/>
        </div>

        <!-- 数据概要 -->
        <div id="totle">
            <!-- 今日收益 -->
            <div class="blue">
                <div class="name">活跃用户数</div>
                <div class="digit">210034</div>
            </div>
            <!-- 今日收益 -->
            <div class="white">
                <div class="name">新用户比例</div>
                <div class="digit">39.8%</div>
            </div>
            <!-- 今日收益 -->
            <div class="white">
                <div class="name">用户流失率</div>
                <div class="digit">1.4%</div>
            </div>
            <!-- 今日收益 -->
            <div class="white">
                <div class="name">VIP用户数</div>
                <div class="digit">18302</div>
            </div>
        </div>

        <div style="margin-top:293px;width:1526px;height:832px;background:rgba(255,255,255,1);box-shadow:0 0 8px rgba(0,0,0,0.05);opacity:1;border-radius:7px;">
            <!-- 新用户占比 -->
            <div id="new_user_proportion">
                <script>
                    var myChart = echarts.init(document.getElementById('new_user_proportion'));

                    {#let kv = {{ rooms_number | safe }};//取出后台传递的数据，此处添加safe过滤避免警告#}
                    {#let test = [];//声明一个新的字典用于存放数据#}
                    {#for (let logKey in kv) {//将对应键值对取出存入test，logKey 为该字典的键#}
                    {#    if (!kv.hasOwnProperty(logKey)) continue;#}
                    {#    test.push({value: kv[logKey], name: logKey});#}
                    {# }#}

                    var option = {
                        {#数据接口：test#}
                        dataset: {
                            source: [{value: 200, name: '男性活跃用户'},
                                {value: 350, name: '女性活跃用户'},
                                {value: 60, name: '不活跃用户'},
                            ],
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: function (params) {
                                return params.name + ": " + params.value.value + "人 " + "(" + params.percent + "%)"
                            },
                            textStyle:{
                                fontSize:17,
                                fontFamily:'Microsoft YaHei',
                                fontWeight:400,
                                color:'#4D6282',
                            },
                            backgroundColor:'#FFFFFF',
                            extraCssText: 'box-shadow: 0px 3px 10px rgba(67,86,136,0.16);',
                        },
                        title: {
                            text: '活跃用户占比',
                            left: 47,
                            top: 34,
                            textStyle: {
                                fontSize: 21,
                                fontWeight: 'bold',
                                color: '#4F4F4F',
                            }
                        },
                        legend: {
                            orient: 'horizontal',
                            x: 'center',
                            bottom: 45,
                            data: ['男性活跃用户', '女性活跃用户', '不活跃用户'],
                            icon: "circle",
                            textStyle: {
                                fontSize: 16,
                                color: "#4D6282",
                            }
                        },
                        series: [{
                            type: 'pie',
                            radius: ['40%', '50%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: 25,
                                        fontWeight: 'bold'
                                    },
                                }
                            },
                            color: ['#5A9DFF', '#78B5FF', 'rgba(196,197,202,0.35)']
                        }]
                    };
                    myChart.setOption(option);
                </script>
            </div>


            {#            我是分割线#}
            <div style="height: 320px;width: 2px;background: #EFF0F5;float: left;margin-top: 46px"></div>

            <!-- 年龄情况 -->
            <div id="age_chart" style="width:740px;height:418px;float:left;">
                <script>
                    var myChart = echarts.init(document.getElementById('age_chart'));
                    var option = {
                        title: {
                            text: '活跃用户年龄情况',
                            textStyle: {
                                fontSize: 21,
                                fontWeight: 'bold',
                                color: '#000000',
                                fontFamily: 'Microsoft YaHei',
                            },
                            left: 20,
                            top: 37,
                        },
                        legend: {
                            data: ['男性活跃用户', '女性活跃用户', '性别未知活跃用户'],
                            icon: "circle",
                            textStyle: {
                                color: '#4D6282',
                                fontSize: 16,
                            },
                            left: 250,
                            top: 37
                        },
                        grid: {
                            left: 70,
                            top: 90,
                        },
                        tooltip: {
                            textStyle: {
                                fontSize: 17,
                                fontFamily: 'Microsoft YaHei',
                                fontWeight: 400,
                                color: '#4D6282',
                            },
                            backgroundColor: '#FFFFFF',
                            extraCssText: 'box-shadow: 0px 3px 10px rgba(67,86,136,0.16);',
                            formatter: function (params) {
                                return params.name + "(岁): " + params.value + "人"
                            }
                        },
                        xAxis: {
                            name: '(岁)',
                            nameTextStyle:{
                                color:'#9EADC5',
                                padding: [6,0],
                                verticalAlign:'top',
                                align:'middle',
                            },
                            data: ["18-24", "25-34", "35-44", "45-54", "55-64", "年龄未知"],
                            axisLine: {
                                lineStyle: {
                                    color: '#EFF0F5',
                                },
                            },
                            axisLabel: {
                                color: '#9EADC5',
                            },
                        },
                        yAxis: {
                            nameTextStyle: {
                                color: '#9EADC5',
                                fontSize: 10,
                                fontFamily: 'Microsoft YaHei',
                                align: 'right',
                            },
                            nameGap: 10,
                            axisLine: {
                                show: false,
                            },
                            axisLabel: {
                                color: '#9EADC5',
                            },
                            axisTick: {
                                show: false,
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#EFF0F5',
                                },
                            },
                        },
                        series: [{
                            name: '男性活跃用户',
                            type: 'bar',
                            data: [600, 550, 390, 650, 410, 390],
                            color: '#4789FF',
                            barWidth: 10,
                        },
                            {
                                name: '女性活跃用户',
                                type: 'bar',
                                data: [450, 410, 580, 380, 390, 570],
                                color: '#1ECBC1',
                                barWidth: 10,
                            },
                            {
                                name: '性别未知活跃用户',
                                type: 'bar',
                                data: [450, 410, 580, 380, 390, 570],
                                color: '#DAE3E6',
                                barWidth: 10,
                            }
                        ]
                    }
                    myChart.setOption(option)
                </script>
            </div>
            {#                我又是分割线#}
            <div style="height: 320px;width: 2px;background: #EFF0F5;float: left;margin-top: 46px"></div>

            {#            活跃用户分布#}
            <div id="distribution" style="width: 350px;height: 418px;float:left;">
                <script>
                    var myChart = echarts.init(document.getElementById('distribution'));
                    var option = {
                        title: {
                            text: '活跃用户分布',
                            textStyle: {
                                fontSize: 21,
                                color: 'rgba(0,0,0,1)',
                                fontFamily: 'Microsoft YaHei',
                            },
                            top: 39,
                            left: 50.5
                        },
                        grid: {
                            left: 121.5,
                            top: 106,
                            bottom: 67.5,
                            right: 104,
                        },
                        xAxis: {
                            show: false,
                            type: 'value',
                            max: 100,
                        },
                        yAxis: {
                            {#show:false,#}
                            type: 'category',
                            data: ['华东', '华南', '华北', '西南', '西北', '华中', '东北'],
                            axisLine: {
                                show: false,
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLabel: {
                                fontFamily: 'Microsoft YaHei',
                                fontSize: 16,
                                fontWeight: 400,
                                margin: 34,
                                color: '#4D6282',

                            }
                        },
                        series: [{
                            data: [2, 2, 2, 4, 12, 32, 46],
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(239,240,245,1)',
                            },
                            itemStyle: {
                                color: 'rgba(71,137,255,1)',
                                barBorderRadius: 3,
                            },
                            barWidth: 5,
                            barCategoryGap: 1,
                            label: {
                                show: true,
                                position: [150, -3],
                                formatter: '{c}%',
                                fontSize: 10,
                                fontWeight: 400,
                                fontFamily: 'Microsoft YaHei',

                            },
                        }]
                    };
                    myChart.setOption(option);
                </script>
            </div>

            {#            我还是分割线#}
            <div style="width: 1424px;height:2px;margin-left: 46px;background: #EFF0F5;float: left"></div>

            <!-- sum of people -->
            <div id="money">
                <script type="text/javascript">
                    var myChart = echarts.init(document.getElementById('money'));
                    var option = {
                        title: {
                            text: '月活跃用户数',
                            left: 45,
                            top: 31,
                            textStyle: {
                                fontSize: 24,
                                fontWeight: 'bold',
                                color: '#2D3444',
                                fontFamily: 'Microsoft YaHei',
                            }
                        },
                        grid: {
                            left: 137,
                            top: 106,
                        },
                        xAxis: {
                            name:'(日)',
                            nameTextStyle:{
                                color: '#9EADC5',
                                fontSize: 14,
                                fontFamily: 'Microsoft YaHei',
                                verticalAlign:'top',
                                align: 'right',
                                padding: 6,
                            },
                            nameGap: 50,
                            type: 'category',
                            boundaryGap: false,
                            data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'],
                            axisLine: {
                                lineStyle: {
                                    color: '#EFF0F5',
                                },
                            },
                            axisLabel: {
                                color: '#9EADC5',
                            },
                        },
                        yAxis: {
                            name: '(人) ',
                            nameTextStyle: {
                                color: '#9EADC5',
                                fontSize: 14,
                                fontFamily: 'Microsoft YaHei',
                                align: 'right',
                            },
                            type: 'value',
                            axisLine: {
                                show: false,
                            },
                            axisLabel: {
                                color: '#9EADC5',
                            },
                            axisTick: {
                                show: false,
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#EFF0F5',
                                },
                            },
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                lineStyle: {
                                    color: '#DAE3E6',
                                }
                            },
                            textStyle: {
                                fontSize: 17,
                                fontFamily: 'Microsoft YaHei',
                                fontWeight: 400,
                                color: '#4D6282',
                            },
                            backgroundColor: '#FFFFFF',
                            extraCssText: 'box-shadow: 0px 3px 10px rgba(67,86,136,0.16);',
                            formatter: function (params) {
                                var result;
                                params.forEach(function (item) {
                                    result = '3.' + item.name + '<br>' + item.marker + '活跃用户：' + item.value;
                                })
                                return result;
                            },
                        },
                        series: [{
                            name: '',
                            data: [820, 932, 901, 1034, 1290, 1330, 1320, 1345, 1331, 1312, 1342, 1334, 1234, 1231, 1312, 1451, 1242, 1234, 1241, 1331, 1143, 1150, 1120, 1300, 1312, 1230, 1190, 1309, 1469, 1490, 1450],
                            type: 'line',
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(71,137,255,0.2)' // 0% 处的颜色
                                    }, {
                                        offset: 0.85,
                                        color: 'rgba(255,255,255,0.05)' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            },
                            lineStyle: {
                                color: '#4789FF',
                            },
                            itemStyle: {
                                color: '#4789FF',
                            },
                            showSymbol: false,
                            smooth: true,
                        }
                        ]
                    };
                    myChart.setOption(option);
                </script>
            </div>
        </div>

        <footer style="margin-left:450px;margin-top:30px;float:left;width:600px;text-align: center">
            <a href="http://www.beian.miit.gov.cn/" style="text-decoration:none;color:#939393;float:left">浙ICP备20006523号
                | </a>

            <div style="width:250px;margin:0;float:left">

                <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33011802001941"
                   style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
                    <img src="../../static/image/备案图标.png" style="float:left;"/>
                    <div style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">浙公网安备
                        33011802001941号
                    </div>
                </a>
            </div>

        </footer>
    </div>
{% endblock body %}
